<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>表格操作 - layui</title>

    <link rel="stylesheet" href="./assets/dist/css/layui.css" />
    <style>
      body {
        padding: 32px; /*overflow-y: scroll;*/
      }
    </style>
  </head>
  <body>
    <div class="layui-btn-container">
      <a href="table.html" class="layui-btn">表格综合</a>
      <a
        href="table-test.html"
        class="layui-btn layui-btn-primary layui-border-green"
        >表格操作</a
      >
      <a href="table-static.html" class="layui-btn">静态表格</a>
    </div>

    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">
          获取选中行数据
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="getData">
          获取当前页数据
        </button>

        <button class="layui-btn layui-btn-sm" id="setRowChecked">
          设置行选中状态
          <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
        <button class="layui-btn layui-btn-sm" id="reloadTest">
          重载测试
          <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
        <button
          class="layui-btn layui-btn-sm layui-btn-primary"
          lay-event="multi-row"
        >
          多行
        </button>
        <button
          class="layui-btn layui-btn-sm layui-btn-primary"
          lay-event="default-row"
        >
          单行
        </button>
        <button class="layui-btn layui-btn-sm" id="moreTest">
          更多测试
          <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
      </div>
    </script>

    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      {{# if(layui.$.trim(d.email)){ }}
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
        >删除</a
      >
      {{# } }}
      <input
        type="checkbox"
        name="demoTableSwitch"
        lay-skin="switch"
        {{
        d.demoTableSwitch
        }}
      />
    </script>

    <script type="text/html" id="usernameTpl">
      <a href="" class="layui-table-link">{{= d.username }}</a>
    </script>

    <script type="text/html" id="switchTpl">
      <input type="checkbox" name="yyy" lay-skin="switch" lay-text="女|男" />
    </script>

    <script type="text/html" id="cityTpl">
      <select id="demoCity1" lay-unrow lay-ignore>
        <option value="浙江杭州">浙江杭州</option>
        <option value="江西南昌">江西南昌</option>
        <option value="湖北武汉">湖北武汉</option>
      </select>
    </script>

    <script type="text/html" id="checkboxTpl">
      <input type="checkbox" name="" title="锁定" checked />
    </script>

    <script type="text/html" id="pagebarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="footerDemoBtn1">
          底部按钮1
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="footerDemoBtn2">
          底部按钮2
        </button>
      </div>
    </script>

    <div id="parent" style="height: 520px">
      <table id="test"></table>
    </div>

    <script src="./assets/dist/layui.js"></script>
    <script>
      ((off) => {
        if (!off) return;
        layui.disuse('table').extend({
          table:
            '{/}https://cdn.jsdelivr.net/gh/layui/layui@2.7.6/src/modules/table',
        });
      })();

      layui.use(['table', 'dropdown'], () => {
        var $ = layui.$;
        var table = layui.table;
        var laytpl = layui.laytpl;
        var dropdown = layui.dropdown;
        var form = layui.form;

        // 仅用于各类测试的表头
        var test_cols = [
          [
            { type: 'checkbox', fixed: 'left' },
            {
              field: 'id',
              title: 'ID',
              width: 80,
              fixed: 'left',
              unresize: true,
              sort: true,
              totalRowText: '合计：',
            },
            { field: 'username', title: '用户名', width: 120, edit: 'text' },
            {
              field: 'email',
              title: '邮箱 <i class="layui-icon layui-icon-email"></i>',
              hide: 0,
              width: 150,
              edit: 'text',
            },
            {
              field: 'sex',
              title: '性别',
              width: 80,
              edit: 'text',
              sort: true,
            },
            { field: 'city', title: '城市', width: 120 },
            { field: 'sign', title: '签名' },
            {
              field: 'experience',
              title: '积分',
              width: 80,
              sort: true,
              align: 'center',
              totalRow: '{{ d.TOTAL_NUMS }} 😊',
            },
            { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 },
          ],
        ];

        // 全局设定某参数
        table.set({
          where: {
            token: '默认 token 参数',
          },
          // defaultToolbar: ['filter'],
          limit: 30,
          // url: 'list',
          // height: 300
        });

        // 渲染
        window.ins1 = table.render({
          elem: '#test',
          height: '#parent-0',
          // width: 600,
          title: '用户数据表',
          url: './assets/json/table/demo1.json',
          // method: 'post',

          // lineStyle: 'height: 95px;', // 行样式
          css: [
            // 对当前实例自定义样式
            '.layui-table-page{text-align: right;}',
            '.layui-table-pagebar{float: left;}',
            // '.layui-table-init{background-color: rgba(255, 255, 255, 0.6);}'
          ].join(''),
          // className: '.demo-table-view',

          // 自定义 loading 模板 --- 2.9.10+
          // loading: '<i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 38px;"></i>',

          // size: 'sm',
          // skin: 'line',
          // even: true,
          // loading: false,

          totalRow: true,
          pagebar: '#pagebarDemo', // 分页栏模板
          page: !1
            ? false
            : {
                // curr: layui.data('tableCache').curr || 1 // 读取记录中的页码，赋值给起始页
              },
          limit: 30,
          toolbar: '#toolbarDemo',
          defaultToolbar: [
            'filter',
            {
              // 自定义导出 --- 2.9.12+
              name: 'exports',
              onClick: (obj) => {
                var data = table.clearCacheKey(obj.data); // 清除临时字段
                var options = obj.config;

                // 弹出面板
                obj.openPanel({
                  list: [
                    '<li data-type="csv">导出 CSV 文件</li>',
                    '<li data-type="xlsx">导出 XLSX 文件</li>',
                  ].join(''),
                  done: (panel, list) => {
                    list.on('click', function () {
                      var type = $(this).data('type');
                      if (type === 'csv') {
                        table.exportFile(options.id, null, type); // 调用内置导出方法
                      } else if (type === 'xlsx') {
                        // 自助处理导出 - 如借助 sheetjs 库或服务端导出
                        // …
                        layer.msg('自助处理导出 xlsx');
                      }
                    });
                  },
                });
              },
            },
            'print',
            {
              title: '帮助',
              layEvent: 'LAYTABLE_TIPS',
              icon: 'layui-icon-tips',
              onClick: (obj) => {
                layer.alert('Table for layui-v' + layui.v);
              },
            },
          ],
          // escape: false,
          // editTrigger: 'dblclick',
          // cellMaxWidth: 320
          // cellExpandedWidth: 160, // 单元格默认展开后的宽度
          // cellExpandedStyle: 'tips', // 单元格默认展开风格
          cols: !1
            ? test_cols
            : [
                [
                  { type: 'checkbox', fixed: 'left' },
                  // {type: 'numbers', fixed: 'left'},
                  {
                    field: 'id',
                    title: 'ID',
                    width: 80,
                    fixed: 'left',
                    unresize: true,
                    sort: true,
                    totalRowText: '合计：',
                  },
                  {
                    field: 'username',
                    ignoreExport: false,
                    expandedStyle: 'tips',
                    title:
                      '用户名 <i class="layui-icon layui-icon-username" lay-event="username"></i>',
                    width: 120,
                    edit: (d) => !d.LAY_DISABLED,
                    templet: '#usernameTpl',
                  },
                  { field: 'xxx', title: '测试', edit: 'text' },
                  {
                    field: 'email',
                    minWidth: 160,
                    maxWidth: 320,
                    title:
                      '邮箱 <i class="layui-icon layui-icon-email" lay-event="email"></i>',
                    fieldTitle: '邮箱',
                    hide: 0,
                    edit: 'text',
                    style: 'background-color: #fafafa; color: red;',
                    templet: (d) =>
                      '<em>' + layui.util.escape(d.email) + '</em>',
                  },
                  {
                    field: 'sex',
                    title: '性别',
                    width: 80,
                    edit: 'text',
                    sort: true,
                    escape: false,
                  },
                  {
                    field: 'city',
                    title: '城市',
                    width: 120,
                    templet: '#cityTpl',
                    exportTemplet: function (d, obj) {
                      // return '=HYPERLINK("https://abc.com/a.jpg","截图")'; // 测试内容存在特殊符
                      // console.log(obj)
                      var td = obj.td(this.field); //获取当前 td
                      return td.find('select').val();
                    },
                  },
                  {
                    field: 'sign',
                    title: '签名',
                    minWidth: 200,
                    style: 'color: #5FB878',
                    edit: 'textarea',
                  },
                  {
                    field: 'experience',
                    title: '积分',
                    width: 100,
                    sort: true,
                    align: 'center',
                    totalRow: !1 ? true : '{{= d.TOTAL_NUMS }} 分 😊',
                    templet:
                      '<div><a href="" class="layui-table-link">{{= d[d.LAY_COL.field] }}</a> 分</div>',
                  },
                  { field: 'ip', title: 'IP', width: 120, align: 'right' },
                  {
                    field: 'checkin',
                    title: '打卡',
                    width: 100,
                    sort: true,
                    totalRow: '{{= d.TOTAL_ROW.checkin }} 次',
                  },
                  { field: 'joinTime', title: '加入时间', width: 120 },
                  {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 180,
                  },
                ],
              ],

          // autoSort: false // 禁用前端自动排序，由服务的完成排序
          initSort111: {
            // 初始排序状态
            field: 'experience', // 排序字段，对应 cols 设定的各字段名
            type: 'desc', // 排序方式  asc: 升序、desc: 降序、null: 默认排序
          },

          headers: { headers_token: 'sasasas' },
          where: {
            test: '初始 test 参数',
            token: '初始 token',
            key: 'experience',
            order: 'asc',
          },
          before: (options) => {
            options.where.AAAAA = 123;
            // console.log(options)
          },
          done: function (res, curr, count) {
            var id = this.id;

            // 记录当前页码
            /*
      layui.data('tableCache', {
        key: 'curr',
        value: curr
      });
      */

            // 设置选中行状态
            dropdown.render({
              elem: '#setRowChecked', // 可绑定在任意元素中，此处以上述按钮为例
              data: [
                {
                  id: 'checked',
                  title: '选中某行',
                },
                {
                  id: 'unchecked',
                  title: '取消选中某行',
                },
                {
                  id: 'mult-checked',
                  title: '同时选中多个',
                },
                {
                  id: 'reset-checked',
                  title: '给选中行取消选中状态',
                },
              ],
              // 菜单被点击的事件
              click: (obj) => {
                if (obj.id === 'mult-checked') {
                  // 同时选中多个
                  table.setRowChecked(id, {
                    index: [3, 4, 5], // 2.9.1+
                    checked: true,
                  });
                } else if (obj.id === 'reset-checked') {
                  // 给选中行取消选中状态
                  table.setRowChecked(id, {
                    index: 'all',
                    checked: false,
                  });
                } else {
                  layer.prompt(
                    {
                      title: '请输入表格行号',
                      value: 1,
                      shade: false,
                    },
                    (value, i) => {
                      switch (obj.id) {
                        case 'checked':
                          table.setRowChecked(id, {
                            index: value,
                            checked: true,
                          });
                          break;
                        case 'unchecked':
                          table.setRowChecked(id, {
                            index: value,
                            checked: false,
                          });
                          break;
                      }
                      layer.close(i);
                    },
                  );
                }
              },
            });

            // 重载测试
            dropdown.render({
              elem: '#reloadTest', // 可绑定在任意元素中，此处以上述按钮为例
              data: [
                {
                  id: 'reload',
                  title: '重载',
                },
                {
                  id: 'reload-deep',
                  title: '重载 - 参数叠加',
                },
                {
                  id: 'reloadData',
                  title: '仅重载数据',
                },
                {
                  id: 'reloadData-deep',
                  title: '仅重载数据 - 参数叠加',
                },
              ],
              // 菜单被点击的事件
              click: (obj) => {
                switch (obj.id) {
                  case 'reload':
                    // 重载 - 默认（参数重置）
                    table.reload('test', {
                      where: {
                        abc: '123456',
                        // test: '新的 test2',
                        // token: '新的 token2'
                      },
                      height: 'full-130', // 重载高度
                      /*
                cols: [[ // 重置表头
                  {type: 'checkbox', fixed: 'left'},
                  {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'},
                  {field:'sex', title:'性别', width:80, edit: 'text', sort: true},
                  {field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'},
                  {field:'logins', title:'登入次数', width:100, sort: true, totalRow: true},
                  {field:'joinTime', title:'加入时间', width:120}
                ]]
                */
                    });
                    break;
                  case 'reload-deep':
                    // 重载 - 深度（参数叠加）
                    table.reload(
                      'test',
                      {
                        where: {
                          abc: 123,
                          test: '新的 test1',
                        },
                        //,defaultToolbar: ['print'] // 重载头部工具栏右侧图标
                        page: { curr: 5, limit: 20 },
                        //,cols: ins1.config.cols
                      },
                      true,
                    );
                    break;
                  case 'reloadData':
                    // 数据重载 - 参数重置
                    table.reloadData('test', {
                      where: {
                        abc: '123456',
                        // test: '新的 test2',
                        // token: '新的 token2'
                      },
                      height: 2000, // 测试无效参数
                      // url: '404',
                      // elem: null,
                      // page: {curr: 5, limit: 20},
                      scrollPos: 'fixed', // 保持滚动条位置不变
                    });
                    break;
                  case 'reloadData-deep':
                    // 数据重载 - 参数叠加
                    table.reloadData(
                      'test',
                      {
                        where: {
                          abc: 123,
                          test: '新的 test1',
                        },
                      },
                      true,
                    );
                    break;
                }
                layer.msg('可观察 Network 请求参数的变化');
              },
            });

            // 更多测试
            dropdown.render({
              elem: '#moreTest', // 可绑定在任意元素中，此处以上述按钮为例
              data: [
                {
                  id: 'add',
                  title: '添加',
                },
                {
                  id: 'update',
                  title: '编辑',
                },
                {
                  id: 'delete',
                  title: '删除',
                },
              ],
              // 菜单被点击的事件
              click: (obj) => {
                var checkStatus = table.checkStatus(id);
                var data = checkStatus.data; // 获取选中的数据

                switch (obj.id) {
                  case 'add':
                    layer.open({
                      title: '添加',
                      type: 1,
                      area: ['80%', '80%'],
                      content:
                        '<div style="padding: 16px;">自定义表单元素</div>',
                    });
                    break;
                  case 'update':
                    layer.open({
                      title: '编辑',
                      type: 1,
                      area: ['80%', '80%'],
                      content:
                        '<div style="padding: 16px;">自定义表单元素</div>',
                    });
                    break;
                  case 'delete':
                    if (data.length === 0) {
                      return layer.msg('请选择一行');
                    }
                    layer.msg('delete event');
                    break;
                }
              },
            });
          },

          /*
    request: { // 自定义请求参数名称
      pageName: 'curr', // 页码的参数名称，默认：page
      limitName: 'nums' // 每页数据量的参数名，默认：limit
    },
    parseData: function(res){ // 任意数据格式的解析
      return {
        "status": res.status,
        "msg": res.message,
        "count": res.total,
        "data": res.data.list
      };
    },
    */

          error: (res, msg) => {
            console.log(res, msg);
          },
        });

        // 排序事件
        table.on('sort(test)', (obj) => {
          // console.log(obj);

          // return;
          layer.msg('服务端排序。order by ' + obj.field + ' ' + obj.type);

          // 服务端排序
          table.reloadData('test', {
            // initSort: obj,
            // page: {curr: 1}, // 重新从第一页开始
            where: {
              // 向服务端传入排序参数
              key: obj.field, // 排序字段
              order: obj.type, // 排序方式
            },
          });
        });

        // 头部工具栏事件
        table.on('toolbar(test)', (obj) => {
          var id = obj.config.id;
          var checkStatus = table.checkStatus(id);

          switch (obj.event) {
            case 'getCheckData': {
              var data = checkStatus.data;
              layer.alert(layui.util.escape(JSON.stringify(data)));
              break;
            }
            case 'getData': {
              var getData = table.getData(id);
              console.log(getData);
              layer.alert(layui.util.escape(JSON.stringify(getData)));
              break;
            }
            case 'isAll':
              layer.msg(checkStatus.isAll ? '全选' : '未全选');
              break;
            case 'multi-row':
              table.reload('test', {
                // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                lineStyle: 'height: 95px;',
              });
              layer.msg('即通过设置 lineStyle 参数可开启多行');
              break;
            case 'default-row':
              table.reload('test', {
                lineStyle: null, // 恢复单行
              });
              layer.msg('已设为单行');
              break;
          }
        });

        // 表头自定义元素工具事件
        table.on('colTool(test)', (obj) => {
          console.log(obj);
        });

        // 触发单元格工具事件
        table.on('tool(test)', (obj) => {
          // 双击 toolDouble
          var data = obj.data;
          // console.log(obj)
          if (obj.event === 'edit') {
            layer.prompt(
              {
                formType: 2,
                value: data.email,
              },
              (value, index) => {
                obj.update(
                  {
                    email: value,
                  },
                  true,
                ); // 参数 true 为新版新增功能，详见文档

                /*
        // 上述 obj.update() 只是在前端临时更新数据视图
        // 在实际业务中，当发送修改请求成功后，可再执行 reloadData 来重载数据
        table.reloadData('test', {
          scrollPos: 'fixed' // 保持滚动条位置不变
        });
        */
                layer.close(index);
              },
            );
          } else if (obj.event === 'del') {
            layer.confirm('真的删除行么', (index) => {
              obj.del();
              layer.close(index);
            });
          }
        });

        // 触发表格复选框选择
        table.on('checkbox(test)', (obj) => {
          console.log(obj);
        });

        // 触发表格单选框选择
        table.on('radio(test)', (obj) => {
          console.log(obj);
        });

        // 行单击事件
        table.on('row(test)', (obj) => {
          console.log('onrow', obj); // 查看返回的对象成员

          // 单击行设置选中
          obj.setRowChecked({
            // type: 'radio'
          });
        });

        // 行双击事件
        table.on('rowDouble(test)', (obj) => {
          console.log('onrowDouble', obj); // 查看返回的对象成员
        });

        // 单元格编辑事件
        table.on('edit(test)', function (obj) {
          var field = obj.field; // 得到字段
          var value = obj.value; // 得到修改后的值
          var oldValue = obj.oldValue; // 得到修改前的值 -- v2.8.0 新增
          var data = obj.data; // 得到当前编辑所在行的数据
          var col = obj.getCol(); // 得到当前列的表头配置属性

          // 值的校验
          if (field === 'email') {
            if (
              !/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(
                obj.value,
              )
            ) {
              layer.tips(
                '输入的' + col.fieldTitle + '格式不正确，请重新编辑',
                this,
                { tips: 1 },
              );
              return obj.reedit(); // 重新编辑 -- v2.8.0 新增
            }
          }

          // 编辑后续操作，如提交更新请求，以完成真实的数据更新
          // …
          layer.msg('编辑成功', { icon: 1 });

          // 其他更新操作
          var update = {};
          update[field] = value;
          obj.update(update, true); // 参数 true 为 v2.7.4 新增功能，即同步更新其他包含自定义模板并可能存在关联的列视图
        });

        // 列拖拽宽度后的事件 -- v2.8.0 新增
        table.on('colResized(test)', (obj) => {
          console.log(obj);
        });

        // 列拖拽宽度后的事件 -- v2.8.0 新增
        table.on('colToggled(test)', (obj) => {
          console.log(obj);
        });
      });
    </script>
  </body>
</html>
